<template>
  <view>
    <view class="w100 rowsb rowsm h-120 pl-40 pr-40">
      <view class="w100 rowsb rowsm h100 trt" style="border-bottom: 2rpx solid rgba(112, 112, 112, .1);">
        <view class="fs-28 col333 fw-b">活动名称：</view>
        <input type="text" placeholder="请输入活动名称" placeholder-class="fs-28 col888" v-model="name">
      </view>
    </view>
    <view class="w100 rowsb rowsm h-120 pl-40 pr-40">
      <view class="w100 rowsb rowsm h100 trt" style="border-bottom: 2rpx solid rgba(112, 112, 112, .1);">
        <view class="fs-28 col333 fw-b">活动时间：</view>
        <picker mode="date" @change="choseTime">
          <input type="text" placeholder="请输入活动时间" disabled placeholder-class="fs-28 col888" v-model="time">
        </picker>
      </view>
    </view>
    <view class="w100 pt-40 mb-38">
      <!-- <view class="w100 rowsb rowsm h100 trt pl-40 pr-40 mb-40">
        <view class="fs-28 col333 fw-b">级别：</view>
        <picker mode="selector" :range="levelList" range-key="name" @change="choseLevel">
          <view class="rows rowsm">
            <input type="text" placeholder="级别" disabled placeholder-class="fs-28 col888" v-model="choseLevelName">
            <image src="/static/icon_c.png" class="w-24 ml-10 h-24" mode=""></image>
          </view>
        </picker>
      </view> -->
      <view class="w100 pl-24 pr-24">
        <view class="w100 br-10 p-all-40 mb-20" style="background-color: #F7F6FA;">
          <textarea value="" class="w100" auto-height placeholder="输入说明" placeholder-class="fs-28 col888" v-model="info" />
        </view>
      </view>
    </view>
    
    <view class="pl-24 pr-24">
      <view class="fs-28 col333 fw-b mb-40 pl-16">上传证书：</view>
      <view class="w100 h-140 br-10 rows rowsm pl-40" style="background-color: #F7F6FA;" @click="choseFile" >
        <image src="/static/icon_cs.png" class="w-60 h-60 mr-20" mode=""></image>
        <view class="fs-28 col888">（可上传word、pdf、excel、图片、视频）</view>
      </view>
       <view class="fs-28 mark" >附件不能大于100M</view>
     <view class="w100 h-140 br-10 rowsb rowsm pl-40" style="background-color: #F7F6FA;" v-for="(item,index) in fileList" :key="index">
          <view class="rows rowsm w-500">
            <image src="/static/file.png" class="w-60 h-60 mr-20" mode=""></image>
            <view class="fs-28 col888 w100 one_overflow">{{item.fileName}}</view>
          </view>
          <view class="w-120 h-60 br-30 rowsc rowsm colfff fs-24" style="background: linear-gradient(to bottom,#4897FF,#4878FF);" @click="handelDelete(item)">删除</view>
        </view>
    </view>
    
    <view class="w100 h-200"></view>
    
    <view class="w100 rowsc rowsm fixed" style="bottom: 100rpx;">
      <view class="w-702 h-84 br-42 rowsc rowsm colfff" style="background: linear-gradient(to bottom,#4897FF,#4878FF);" @click="submit()">提交</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        name:'',
        levelList:[],
        choseLevelName:'',
        time:'',
        info:'',
        type:'',
        file:'',
        fileType:'',
        fileName:'',
        id:'',
        fileList:[]
      };
    },
    onLoad(e) {
      if(e.id){
        this.id = e.id
        this.getInfo()
      }
      this.type = e.type
      uni.setNavigationBarTitle({
        title:e.title
      })
      this.getLevelList()
    },
    methods:{
      getInfo(){
        this.$tools.axiosFromToken('POST','prold/getById',{id:this.id},'加载中').then(res => {
          if(res.code != 200) return this.$tools.showtt(res.msg)
          let {data} = res
          this.name = data.name
          this.time = data.bgTime
          this.info = data.content
          this.file = data.file
          this.fileType = data.fileType
          this.fileName = data.fileName
          this.fileList = data.proFileList
        })
      },
      // 删除文件
      handelDelete(item){
        this.fileList.splice(item,1)
      },
      choseFile(){
        if(this.fileList.length == 6) return this.$tools.showtt('最多上传6个文件')
        uni.showActionSheet({
          itemList:['图片','视频','文件'],
          success: (index) => {
            if(index.tapIndex == 0) {
              uni.chooseImage({
                count:6,
                success: (res1) => {
                  res1.tempFilePaths.forEach(item =>{
                    uni.uploadFile({
                      url:this.$tools.httpOne + 'utils/ossUpload',
                      filePath:item,
                      name:'file',
                      success:(res) => {
                       if(JSON.parse(res.data).code == 200){
                          this.fileList.push({
                            fileName:JSON.parse(res.data).newFileName,
                            fileType:'image',
                            file:JSON.parse(res.data).url
                          })
                        }else{
                          this.$tools.showtt('上传失败')
                        }
                      }
                    })
                  })
                  
                }
              })
            }
            if(index.tapIndex == 1) {
              uni.chooseVideo({
                success: (res1) => {
                   if(res1.size > 100 * 1024 * 1024) return this.$tools.showtt('视频大小不能超过100M')
                  uni.uploadFile({
                    url:this.$tools.httpOne + 'utils/ossUpload',
                    filePath:res1.tempFilePath,
                    name:'file',
                    success:(res) => {
                      if(JSON.parse(res.data).code == 200){
                        this.fileList.push({
                          file:JSON.parse(res.data).url,
                          fileName:JSON.parse(res.data).newFileName,
                          fileType:'video'
                        })
                      }else{
                        this.$tools.showtt('上传失败')
                      }
                    }
                  })
                }
              })
            }
            if(index.tapIndex == 2) {
              wx.chooseMessageFile({
                 count:1,
                type:'file',
                success: (res1) => {
                  uni.uploadFile({
                    url:this.$tools.httpOne + 'utils/ossUpload',
                    filePath:res1.tempFiles[0].path,
                    name:'file',
                    success:(res) => {
                      if(JSON.parse(res.data).code == 200){
                        this.fileList.push({
                          file:JSON.parse(res.data).url,
                          fileName:JSON.parse(res.data).newFileName,
                          fileType :res1.tempFiles[0].type
                        })
                      }else{
                        this.$tools.showtt('上传失败')
                      }
                    }
                  })
                }
              })
            }
          }
        })
        
        
        
        
      },
      submit(){
        if(!this.name) return this.$tools.showtt('请输入名称')
        // if(!this.choseLevelName) return this.$tools.showtt('请选择级别')
        if(!this.time) return this.$tools.showtt('请选择时间')
        if(!this.info) return this.$tools.showtt('请输入说明')
        if(this.fileList.length ==0) return this.$tools.showtt('请上传文件')
        let data = {
          type:this.type,
          name:this.name,
          bgTime:this.time,
          // jbName:this.choseLevelName,
          content:this.info,
          file:this.file,
          fileType:this.fileType,
          fileName:this.fileName,
          id:this.id,
           proFileList:this.fileList
        }
        if(!this.id){
          this.$tools.axiosFromToken('POST','prold/add',{...data},'加载中').then(res => {
            this.$tools.showtt(res.msg)
            if(res.code != 200) return
            setTimeout(() => {
              this.$tools.goBack(1)
            },1000)
          })
        }else {
          this.$tools.axiosFromToken('POST','prold/update',{...data},'加载中').then(res => {
            this.$tools.showtt(res.msg)
            if(res.code != 200) return
            setTimeout(() => {
              this.$tools.goBack(2)
            },1000)
          })
        }
      },
      getLevelList(){
        this.$tools.axiosFromToken('POST','proldconfig/listJb',{},'加载中').then(res => {
          if(res.code != 200) return this.$tools.showtt(res.msg)
          let {rows} = res
          this.levelList = rows
        })
      },
      choseTime(e){
        this.time = e.detail.value
      },
      choseLevel(e){
        this.choseLevelName = this.levelList[e.detail.value].name
      },
    }
  }
</script>

<style lang="scss">
page {
  background-color: #fff;
}
.mark{
  text-align: right;
  color: #f92929;
}
</style>
